import React, {Component,} from 'react'
import {withRouter,} from 'react-router-dom'
import {connect,} from 'react-redux'
import GoBackLayout from "../../layouts/GoBackLayout/GoBackLayout";
import {formatDate, formatDateWithDot, handleDateChange} from "../../utils/dateService";
import DateTabs from "../../shared-components/DateTabs/DateTabs";
import NoDataPage from "../game/Football/NoDataPage/NoDataPage";
import {GameDataArrayToObject, GameDataObjectFinalized} from "../../redux/game";
import FootballGameCard from "../../shared-components/FootballGameCard/FootballGameCard";
import LocalStorageService from "../../utils/LocalStorageService";

class HistoryContainer extends Component {

    constructor(props) {
        super(props)
        this.history = this.props.history
        this.today = this.props.game.today
        this.storage = LocalStorageService
        this.state = {
            tabs: [
                {value: formatDate(handleDateChange(this.today, -3)), title: formatDateWithDot(handleDateChange(this.today, -3)), active: false,},
                {value: formatDate(handleDateChange(this.today, -2)), title: formatDateWithDot(handleDateChange(this.today, -2)), active: false,},
                {value: formatDate(handleDateChange(this.today, -1)), title: formatDateWithDot(handleDateChange(this.today, -1)), active: false,},
                {value: this.today, title: '今天', active: true,},
            ],
            // currentTab: this.tabs.find(tab => tab.active === true),
            // listCompleted: false,
        }
    }


    componentDidMount() {
        const currentTab = this.state.tabs.find(tab => tab.active === true)
        const date = currentTab.value
        const dateGames = this.props.game.games[date].matches

        // const status = this.status
        if (date && dateGames.length === 0) {
            const doFetchGameListAll = this.props.doFetchGameListAll
            doFetchGameListAll({date,})
        }
    }

    onTabSelected = index => {
        const tabs = this.state.tabs
        let tab
        for (let i = 0; i < tabs.length; i++) {
            if (i === index) {
                tabs[i].active = true
                tab = tabs[i]
            } else {
                tabs[i].active = false
            }
        }
        this.setState({
            tabs: tabs,
            // currentTab: tab,
        })

        const currentDate = this.state.tabs.find(tab => tab.active === true).value
        const dateGames = this.props.game.games[currentDate] ? this.props.game.games[currentDate].matches : []
        const follows = this.storage.get('follow_games')
        const currentTab = tabs.find(tab => tab.active === true)
        const date = currentTab.value
        const dayFollow = follows ? follows[date] : []
        // const status = this.status
        if (dateGames.length === 0 && dayFollow && dayFollow.length > 0) {
            this.props.doFetchGameListAll({date: currentDate,})
        }

    }

    render() {
        const tabs = this.state.tabs
        const currentTab = tabs.find(tab => tab.active === true)
        const date = currentTab.value
        const currentTabGames = this.props.game.games[date] ? this.props.game.games[date] : {}
        const {
            matches = [],
            events = {},
            stages = {},
            teams = {},
        } = currentTabGames

        const follows = this.storage.get('follow_games')
        const dayFollow = follows ? follows[date] : []

        const matchesToRender = dayFollow ? matches
            // .filter(match => match[2] === 8)
            .filter(match => {
                let id = match[0]
                for (let i = 0; i < dayFollow.length; i++) {
                    let game = dayFollow[i]
                    if (id === Number(game.matchId)) {
                        return true
                    }
                }
                return false
            })
            : []

        // let date = tabs

        const gamesTemplate = matchesToRender.map(gameArr => {
            const gameObjInit = GameDataArrayToObject(gameArr)
            const gameObjFinal = GameDataObjectFinalized(gameObjInit, teams, events, stages)
            return <FootballGameCard game={gameObjFinal} key={gameObjFinal.matchId}/>
        })


        return <GoBackLayout
            history={this.history}
            title='历史关注'
        >
            <div
                style={{
                    height: '100%',
                    overflow: 'hidden',
                }}
            >
                <DateTabs
                    tabs={tabs}
                    onTabSelected={this.onTabSelected}
                    today={this.today}
                />
                <div
                    style={{
                        height: 'calc(100% - 50px)',
                        overflowY: 'scroll',
                        overflow: 'auto',
                        backgroundColor: 'rgb(248, 248, 248)'
                        // paddingBottom: '40px',
                    }}
                    ref={el => this.container = el}
                    // onScroll={e => this.fetchPrevSection()}
                >
                    {matchesToRender.length > 0 ? gamesTemplate : <NoDataPage/>}
                </div>
            </div>
        </GoBackLayout>
    }

}

const mapState = state => ({
    game: state.game,
})

const mapDispatch = dispatch => ({
    doFetchGameListAll: payload => dispatch.game.doFetchGameListAll(payload),
})

export default connect(mapState, mapDispatch)(withRouter(HistoryContainer))
